<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/lib/prism/prism.css">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
    <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>
<!--导航-->
<nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini"><!--Semantic ui 的语句 ui是其中的-->
    <div class="ui container"><!--container一个容器-->
        <div class="ui inverted secondary stackable menu"><!--menu中的每个组件都要item-->
            <h2 class="ui teal header item">Blog</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a><!--i是引入图标的-->
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
            <div class="right m-item item m-mobile-hide">
                <div class="ui icon inverted transparent input"><!--inverted是背景颜色反转-->
                    <input type="text" placeholder="Search...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--中间内容-->
<div id="waypoint" class="m-container-small m-padded-tb-big animate__fadeIn">
    <div class="ui container">
        <!--头像-->
        <div class="ui top attached segment">
            <div class="ui horizontal link list">
                <div class="item">
                    <img src="https://picsum.photos/id/1006/100/100" th:src="@{${blog.avatar}}" alt="" class="ui avatar image"><!--avatar图片可以作为头像和文本显示在同一行-->
                </div>
                <div class="item"><a href="#" class="header" th:text="${blog.nickname}">高胜祥</a></div>
                <div class="item">
                    <i class="calendar icon" ></i> <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-10-01</span>
                </div>
                <div class="item">
                    <i class="eye icon"></i> <span th:text="${blog.views}">4396</span>
                </div>
            </div>
        </div>
        <!--图片-->
        <div class="ui attached segment">
            <img src="https://picsum.photos/id/1006/800/400" th:src="@{${blog.firstPicture}}" alt="" class="ui fluid rounded image">
        </div>
        <!--内容-->
        <div class="ui attached segment">
            <div class="ui right aligned basic segment">
                <div class="ui basic orange label" th:text="${blog.flag}">原创</div>
            </div>
            <h2 class="ui centered aligned header" th:text="${blog.title}">redis的一些简单的命令</h2>
            <!--博客内容-->

            <div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-mini" th:utext="${blog.content}">
                aaaaaa
            </div>


            <!--标签-->
            <div class="m-padded-lr-responsive m-padded-tb">
                <div class="ui basic teal left rounded label" style="font-size: 13px;" th:each="tag : ${tags}" th:text="${tag.tag_name}">Redis</div>
            </div>
            <div class="ui center aligned  basic segment">
                <button id="payButton" class="ui orange circular basic button">赞赏</button>
            </div>
            <!--点击赞赏之后出来的支付宝和微信的支付图片-->
            <div class="ui payQR flowing popup top left transition hidden"><!--flowing popup是一种效果-->
                <div class="ui orange basic label">
                    <div class="ui images" style="font-size: inherit !important;">
                        <div class="image">
                            <img src="../static/images/wechat.png" th:src="@{/images/wechat.png}" alt="" style="width: 120px">
                            <div>微信</div>
                        </div>
                        <div class="image">
                            <img src="../static/images/wechat.png" th:src="@{/images/wechat.png}" alt="" style="width: 120px">
                            <div>支付宝</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--博客信息-->
        <div class="ui attached positive message">
            <div class="ui middle aligned grid"><!--middle aligned 垂直居中-->
                <!--文字说明-->
                <div class="eleven wide column">
                    <ui class="list">
                        <li>作者：<span th:text="${blog.nickname}"></span></li>
                        <li>发表时间：<span th:text="${#dates.format(blog.updateTime,'yyy-MM-dd')}"></span></li>
                        <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                        <li>公众号转载：请在文末添加作者公众号二维码</li>
                    </ui>
                </div>
                <!--微信二维码-->
                <div class="five wide column">
                    <img src="../static/images/wechat.png" th:src="@{/images/wechat.png}" alt="" class="ui right floated rounded bordered image" style="width: 120px;">
                </div>
            </div>
        </div>
        <!--留言区域-->
        <div class="ui attached segment">
            <!--留言区域列表-->
            <div id="comment-container" class="ui teal segment">
                <div th:fragment="commentList">
                    <div class="ui threaded comments">
                        <h3 class="ui dividing header">留言</h3>
                        <div th:each="comment : ${comments}" class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/1006/800/400" th:src="@{${comment.comment_avatar}}">
                            </a>
                            <div class="content">
                                <a class="author" th:text="${comment.comment_nickname}">Matt</a>
                                <div class="metadata">
                                    <span class="date" th:text="${#dates.format(comment.comment_createTime,'yyy-MM-dd')}">Today at 5:42PM</span>
                                </div>
                                <div class="text" th:text="${comment.comment_content}">
                                    How artistic!
                                </div>
                                <div class="actions">
                                    <a class="reply" data-comment_id="1" data-comment_nickname="Matt" data-topparend_id="1" th:attr="data-comment_id=${comment.comment_id},data-comment_nickname=${comment.comment_nickname},data-topparend_id=${comment.topParent_id}" onclick="reply(this)">回复</a>
                                </div>
                            </div>
                            <!--次级评论-->
                            <div class="comments" th:if="${comment.replyIsEmpty()}">
                                <div th:each="reply : ${comment.replyComment}" class="comment">
                                    <a class="avatar">
                                        <img src="https://picsum.photos/id/1006/800/400" th:src="@{${reply.comment_avatar}}">
                                    </a>
                                    <div class="content">
                                        <a class="author">

                                            <span th:text="${reply.comment_nickname}">Matt</span><span th:text="|@ ${comment.comment_nickname}" class="m-teal">dd</span>
                                        </a>
                                        <div class="metadata">
                                            <span class="date" th:text="${#dates.format(reply.comment_createTime,'yyy-MM-dd')}">Today at 5:42PM</span>
                                        </div>
                                        <div class="text" th:text="${reply.comment_content}">
                                            How artistic!
                                        </div>
                                        <div class="actions">
                                            <a class="reply" data-comment_id="1" data-comment_nickname="Matt" data-topparend_id="1" th:attr="data-comment_id=${reply.comment_id},data-comment_nickname=${reply.comment_nickname},data-topparend_id=${reply.topParent_id}" onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/*-->
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/1006/800/400">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">Yesterday at 12:30AM</span>
                                </div>
                                <div class="text">
                                    <p>This has been very useful for my research. Thanks as well!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://picsum.photos/id/1006/800/400">
                                    </a>
                                    <div class="content">
                                        <a class="author">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date">Just now</span>
                                        </div>
                                        <div class="text">
                                            Elliot you are always so right :)
                                        </div>
                                        <div class="actions">
                                            <a class="reply">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/1006/800/400">
                            </a>
                            <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                    <span class="date">5 days ago</span>
                                </div>
                                <div class="text">
                                    Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <!--*/-->
                    </div>
                </div>
            </div>
            <!--输入区域-->
            <div id="comment_form" class="ui form">
                <!--输入框-->
                <input type="hidden" name="topParent_id" th:value="-1">
                <input type="hidden" name="blog_id" th:value="${blog.blog_id}">
                <input type="hidden" name="parentComment_id" th:value="-1">
                <div class="field">
                    <textarea name="comment_content" placeholder="请输入评论信息.." style="width: 100%"></textarea>
                </div>
                <div class="fields" th:if="${session.user}">
                    <!--提交按钮-->
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button id="commentPost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
                    </div>
                </div>
                <div class="fields" th:unless="${session.user}">
                    <!--提交按钮-->
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <span>请登录后再发表评论</span><a href="#" th:href="@{/log}">登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--小工具条-->
<div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none;">
    <div class="ui vertical icon buttons">
        <button type="button" class="ui toc teal button">目录</button>
        <a href="#comment-container" type="button" class="ui teal button">留言</a>
        <button class="ui wechat icon button"><i class="weixin icon"></i></button>
        <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>
    </div>
</div>
<!--目录-->
<div class="ui toc-container flowing popup top left transition hidden" style="width: 250px;"><!--flowing popup是一种效果-->
    <ol class="js-toc"></ol>
</div>

<!--弹出的二维码-->
<div id="qrcode" class="ui wechat-qr flowing popup transition hidden" style="width: 130px !important;">
    <!--<img class="ui rounded image" alt="" src="./static/images/wechat.png" style="width: 120px;">-->
</div>

<!--底部footer-->
<footer th:replace="_fragments :: fotter" class="ui inverted attached segment m-padded-tb-massive">
    <div class="ui center aligned container"><!--大的容器-->
        <div class="ui inverted divided stackable grid">
            <div class="three wide column"><!--容器分为16份  three占三份-->
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.png" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list m-text-thin m-text-spaced">
                    <a href="#" class="item">用户故事(User Story)</a>
                    <a href="#" class="item">关于刻意练习的清单</a>
                    <a href="#" class="item">失败要趁早</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email:403631975@qq.com</a>
                    <a href="#" class="item">QQ:403631975</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">Lirenmi</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客</p>
            </div>
        </div>
        <div class="ui inserted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini m-text-lined">Copyright ⚪ 2020 - 2021 Lirenmi Designed by Lirenmi</p>
    </div>
</footer>



<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->


<!--thymeleaf中java取值的必须加 th:inline-->
<script th:inline="javascript">
    /*点击图标平滑滑动到最上面*/


    tocbot.init({
        //把生成的目录初始化到那个区域
        tocSelector: '.js-toc',
        //生成目录的内容的源在哪
        contentSelector: '.js-toc-content',
        //生成的一些级别
        headingSelector: 'h1,h2,h3',
    });
    $('.ui.dropdown').dropdown();

    $('.menu.toggle').click(function (){
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('#payButton').popup({
        popup : $('.payQR.popup'),/*执行popup之后出来的对象*/
        on : 'click', /*造成popup时间发生的原因 click是点击的意思*/
        position : 'bottom center' /*出现的位置*/
    });
    $('.toc.button').popup({
        popup : $('.toc-container.popup'),/*执行popup之后出来的对象*/
        on : 'click', /*造成popup时间发生的原因 click是点击的意思*/
        position : 'left center' /*出现的位置*/
    });
    /*鼠标放上微信图标就会弹出微信二维码*/
    $('.wechat').popup({
        popup : $('.wechat-qr'),
        position : 'left center'
    });

    /*生成二维码*/
    var serurl="http://www.blog.me";
    var url=/*[[@{blog/{id}(id=${blog.blog_id})}]]*/"";
    var qrcode = new QRCode("qrcode", {
        text: serurl+url,
        width: 110,
        height: 110,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
    /*500毫秒内到达0的最顶端*/
    $('#toTop-button').click(function (){
        $(window).scrollTo(0,500);
    });

    /*滚动检测*/
    var waypoint = new Waypoint({
        /*检测的元素*/
        element: document.getElementById('waypoint'),
        /*滚动时触发*/
        handler: function(direction) {
            if(direction == 'down'){
                $('#toolbar').show(100);
            }else{
                $('#toolbar').hide(500);
            }
        }
    })

    /*表单验证*/
    $('.ui.form').form({
        fields : {
            comment_content : {
                identifier : 'comment_content',
                rules : [{
                    type : 'empty',
                    prompt : '标题：请输入评论内容'
                }]
            },
            comment_nickname : {
                identifier : 'comment_nickname',
                rules : [{
                    type : 'empty',
                    prompt : '标题：请输入你的名字'
                }]
            },
            comment_email : {
                identifier : 'comment_email',
                rules : [{
                    type : 'empty',
                    prompt : '标题：请输入正确的邮箱地址'
                }]
            }
        }
    });

    /*传递数据到后台*/
    $("#commentPost-btn").click(function (){
        var boo=$('.ui.form').form("validate form");
        if(boo){
            postData();
        }else{
            console.log("不通过");
        }
    });
    /*表单的刷新*/
    function postData(){
        var topParent_id=$("[name='topParent_id']").val();
        var parentComment_id=$("[name='parentComment_id']").val();
        if(topParent_id==null) {
            topParent_id = -1;
        }
        if(parentComment_id==null){
            parentComment_id=-1;
        }
        $("#comment-container").load(/*[[@{/comments}]]*/"",{
            "topParent_id" : topParent_id,
            "parentComment_id" : parentComment_id,
            "blog_id" : $("[name='blog_id']").val(),
            "comment_content" : $("[name='comment_content']").val()
        },function (responseTxt,statusTxt,xhr){
            $(window).scrollTo($('#comment-container'),500);
            clearContent();
        });
    }

    function clearContent(){
        $("[name='comment_content']").val('');
        $("[name='topParent_id']").val(-1);
        $("[name='parentComment_id']").val(-1);
        $("[name='comment_content']").attr("placeholder",'请输入评论信息').focus();
    }


    /*点击回复按钮过后的事件*/
    /*将一些值赋值给表单*/
    function reply(obj){
        var topParent=$(obj).data('topparend_id');
        var comment_id=$(obj).data('comment_id');
        var comment_nickname=$(obj).data('comment_nickname');
        $("[name='comment_content']").attr("placeholder",'@'+comment_nickname).focus();
        $("[name='parentComment_id']").val(comment_id);
        $("[name='topParent_id']").val(topParent);
        $(window).scrollTo($('#comment_form'),500);
    }
</script>
</body>
</html>